{% extends 'base-layer.html' %}
{% load staticfiles %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/select2/select2.min.css' %}">
{% endblock %}
{% block main %} 
<div class="box box-danger">
	<form class="form-horizontal" id="selectUsersForm" action="" method="post">
		{% csrf_token %} 
		<input type="hidden" name='id' value="{{ role.id }}" />
		<div class="box-body">
			<div class="row">
				<div class="col-xs-5">
					<label class="control-label">可选用户:</label>
					<select name="from" id="multiselect" class="form-control" size="18" multiple="multiple">
						{% for item in un_add_users %}
							<option value="{{ item.id }}" >{{ item.name }}({{ item.username }})</option>
						{% endfor %}
					</select>
				</div>
				<div class="col-xs-2">
					<br><br><br><br><br><br>
					<button type="button" id="multiselect_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
					<button type="button" id="multiselect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
					<button type="button" id="multiselect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
					<button type="button" id="multiselect_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
				</div>
				<div class="col-xs-5">
					<label class="control-label">已绑定用户:</label>
					<select name="to" id="multiselect_to" class="form-control" size="18" multiple="multiple">
						{% for item in added_users %}
							<option value="{{ item.id }}" >{{ item.name }}({{ item.username }})</option>
						{% endfor %}
					</select>
				</div>
			</div>
            <div class="row">
                <div class="col-xs-12 margin-top-5">
                    <p class="text-maroon">*注意：一个用户可以添加到多个角色中,继承多个角色的权限</p>
                </div>
			</div>
		</div>
		<div class="box-footer ">
			<div class="row span7 text-center ">
              <button type="button" id="btnCancel" class="btn btn-default margin-right " >重置</button>
              <button type="button" id="btnSave" class="btn btn-info margin-right " >保存</button>
			</div>
		</div>
	</form>
</div>
{% endblock %}

{% block javascripts %}
<script src="{% static 'plugins/select/multiselect.min.js' %}"></script>
<script type="text/javascript">
$(document).ready(function(){
	//初始化多选列表
	 $('#multiselect').multiselect({
        search: {
            left: '<input type="text" class="form-control" placeholder="Search..." />',
            right: '<input type="text" class="form-control" placeholder="Search..." />',
        },
        fireSearch: function(value) {
            return value.length > 3;
        }
    });


});

$("#btnSave").click(function(){
		$('#multiselect_to option').prop('selected', true);
		var data =$("#selectUsersForm").serialize();
		console.log(data);
		$.ajax({
			type: $("#selectUsersForm").attr('method'),
			url : "{% url 'system-rbac:role-role_user' %}",
			data : data,
			cache: false,
			success : function(msg) {
				if (msg.result){
					layer.alert('操作成功',{icon:1});
				}else{
					//alert(msg.message);
					layer.alert('操作失败',{icon:2});
				}
				return ;
			}
		});
});

	/*点取消刷新新页面*/
    $("#btnCancel").click(function () {
	    window.location.reload();

    });
</script>
{% endblock %}
